<template>
  <div :class="{'app-container':true, 'crud-container':formBuildConfigOrNot}">
    <FormBuildGuide v-if="!formBuildConfigOrNot"
                    :modeConfig="modeConfig"/>
    <template v-else>
      <!--搜索输入区-->
      <el-form :inline="true" class="queryForm"
               ref="queryForm"
               v-show="showSearch"
               :size="formConfig.size"
               :label-position="formConfig.labelPosition"
               :label-width="formConfig.labelWidth + 'px'">
        <FormItem v-for="(item,index) in fieldInfo"
                  :itemInfo="item" :index="index" :key="index" itemType="query"
                  :selectionOptions="formDataOptions"
                  @ItemValChange="ItemValChange"
                  @recordSelectionOptions="recordSelectionOptions"
                  @recordFormColumnType="recordFormColumnType"
                  @recordFormColumnName="recordFormColumnName"/>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="dataTable">
        <!--按钮操作区-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" v-for="(btn, index) in queryOperBtns" :key="index">
            <el-button
              :type="btn.type"
              :icon="btn.icon"
              :size="btn.size"
              :plain="btn.plain"
              :round="btn.round"
              :circle="btn.circle"
              @click="evalEventCode(btn.eventCode)"
              v-hasPermi="[`${btn.hasPermi}`]"
            >
              <span v-if="!btn.circle">{{btn.label}}</span>
            </el-button>
          </el-col>
          <!--右侧查询按钮-->
          <right-toolbar :showSearch.sync="showSearch"
                         stype="V1"
                         :tabGenId="tabGenId"
                         :fieldInfo="fieldInfo"
                         :formDataOptions="formDataOptions"
                         @handleQuery="handleQuery"
                         @resetQuery="resetQuery"
                         @queryTable="getList"
                         @changeModeConfig="changeModeConfig"/>
        </el-row>
        <!--数据表格-->
        <component v-if="tableComponentIsValid"
                   :is="tableComponent"
                   :data="tableData"
                   :tableConfig="table"
                   @selection-change="handleSelectionChange"
                   @sort-change="handleSortChange"
                   @btnOperEvent="evalEventCode"
                   @pagination="handerPagination"/>
      </div>

      <!-- 表单对话框 -->
      <el-dialog :title="title" v-if="open" :visible.sync="open"
                 class="addendum-dialog"
                 v-dialog-drag="{'width':modeConfig.formWidth,'height':modeConfig.formHeight}"
                 :close-on-click-modal="false"
                 :destroy-on-close="true"
                 :fullscreen="modeConfig.formWidth>0?false:true"
                 @close="cancel" >
          <Edit v-if="open"
              :fieldInfo="fieldInfo"
              :defPk="updateId"
              :VisitType="VisitType"
              :visitConfig="visitConfig"
              :selectionOptions="formDataOptions"
              :formColumnNameInfos="formColumnNameInfo"
              :formBuildKey="formBuildKey"
              @cancel="cancel"/>
        </el-dialog>
      <!-- Excel导入对话框 -->
      <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
        <div style="width:100%;text-align: center">
          <el-upload
              ref="upload"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :action="upload.url + '?updateSupport=' + upload.updateSupport"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！
              <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
            </div>
          </el-upload>
        </div>
        <div slot="footer" class="dialog-footer" style="display: flex; flex-direction: row; justify-content: center;">
          <template v-if="upload.isUploading">
            <el-alert type="warning" :closable="false">
              <span><i class="el-icon-loading"/>数据导入处理中，请稍等...</span>
            </el-alert>
          </template>
          <template v-else>
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </template>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
  import { CrudMixins } from "@/views/youshuda/mixins/CrudMixins";
  export default {
    name: "BaseModeCRUD",
    mixins: [CrudMixins],
    components:{
      DefaultTable:()=>import('@/views/youshuda/components/FormBuild/component/cn/youshuda/pc/table/default')
    },
    methods: {},
    created() {
      /** 初始化业务模块参数 **/
      this.initModeParams();
    }
  };
</script>

<style lang="scss" scoped>

  .crud-container{
    padding: 6px;
    background-color: #F5F5F5;
  }

  .el-icon-loading{
    margin-right: 10px;
  }

</style>
